<template>
  <div>
    <h4 style="margin: 10px 0">个人信息</h4>
    <el-form :model="user" :rules="userRule" ref="user" label-width="100px" class="demo-ruleForm">
      <!-- nickname昵称验证 -->
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="user.nickname"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio v-model="user.gender" label="M">男</el-radio>
        <el-radio v-model="user.gender" label="W">女</el-radio>
      </el-form-item>

      <!-- phone电话号码验证 -->
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="user.phone"></el-input>
      </el-form-item>

      <el-form-item label="email" prop="email">
        <el-input v-model="user.email"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="birthday">
            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="user.birthday"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="当前状态" prop="isEnable">
        <el-tag :type="user.tagType">{{ user.isEnable }}</el-tag>
      </el-form-item>
      <el-form-item label="个人简介" prop="description">
        <el-input type="textarea" v-model="user.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(user)">修改</el-button>
        <el-button @click="resetForm(user)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  created() {
    this.getCurrentUserInfo();

  },
  data() {
    return {
      user:{},

      userRule: {
        nickname: [
          {required: true, message: "请输入昵称", trigger: "change"},
        ],
        phone: [
          {required: true, message: "请输入电话", trigger: "change"},
        ],
        email: [
          {required: true, message: "请输入电子邮箱", trigger: "change"},
        ],
        birthday: [
          {required: true, message: "请选择生日", trigger: "change"},
        ],
        description: [
          {required: true, message: "请输入简介", trigger: "change"},
        ],


      },


    };
  },
  methods: {
    getCurrentUserInfo() {
      this.axios.get("/user/info").then(({ data }) => {
        if(data.state == 20000){
          this.user = data.data
          if(this.user.isEnable == 1){
            this.user.isEnable = '正常用户'
            this.user.tagType = 'success'
          }else{
            this.user.isEnable = '禁言中'
            this.user.tagType = 'danger'
          }
        }else {
          this.$message.error(data.message);
        }

      })
    },

    submitForm(user){
      if(this.user.isEnable == '正常用户'){
        this.user.isEnable = 1
      }else{
        this.user.isEnable = 0
      }
      this.axios.post("/user/update-info", this.user).then(({ data }) => {
        if(data.state == 20000){
          this.$message.success(data.message);
          if(this.user.isEnable == 1){
            this.user.isEnable = '正常用户'
            this.user.tagType = 'success'
          }else{
            this.user.isEnable = '禁言中'
            this.user.tagType = 'danger'
          }
        }else {
          this.$message.error(data.message);
        }

      })

    },

    resetForm(user){
      this.getCurrentUserInfo();

    }

  },

}
</script>

<style>
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
